<%@ page language="java" import="java.util.*" isELIgnored="false"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ page isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>登入</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<link rel="stylesheet" href="/css/thisAlter.css" />
<script type="text/javascript" src="/js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(function(){
		var alterCon = $("#alterContent").text();
		if(alterCon!=""){
			$(".alterDiv").show();
			var interval = setInterval(function(){
				$(".alterDiv").hide();
				$("#alterContent").text("");
				clearInterval(interval);
			},3000);
		}
		$("#alterBut").click(function(){
			$(".alterDiv").hide();
		});
});
</script>
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<style type="text/css">
input:-webkit-autofill {
	transition: background-color 100000000000000000s ease-in-out 0s;
}

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: 'Courier New', Courier, monospace;
}

.container {
	height: 100%;
	background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.login-wrapper {
	background-color: #fff;
	width: 450px;
	height: 580px;
	border-radius: 15px;
	padding: 0 50px;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
}
/* login标题 */
.header {
	font-size: 38px;
	font-weight: bold;
	text-align: center;
	line-height: 200px;
}

/* input文本框 */
.input-item {
	width: 94%;
	height: 100%;
	margin-bottom: 30px;
	border: 0;
	padding-top: 10px;
	padding-left: 8px;
	border-bottom: 1px solid rgb(128, 125, 125);
	font-size: 15px;
	outline: none;
	box-sizing: border-box;
}
/* 登录按钮 */
.btn {
	text-align: center;
	padding: 12px;
	width: 100%;
	margin-top: 20px;
	border: none;
	background-image: linear-gradient(to left, #a6c1ee, #fbc2eb);
	color: #fff;
	cursor: hand;
}

.msg {
	line-height: 85px;
	text-align: center;
}

a {
	text-decoration-line: none;
	color: #abc1ee;
}

.item {
	height: 40px;
	border-bottom: 1px solid #fff;
	margin-bottom: 40px;
	position: relative;
}

.form-wrapper label {
	position: absolute;
	left: 9px;
	margin-top: 18px;
	transition: all 0.5s linear;
}

.input-item:focus+.label-phone, .input-item:valid+.label-phone {
	margin-top: 0px;
	font-size: 2px;
}

.input-item:focus+.label-ps, .input-item:valid+.label-ps {
	margin-top: 0px;
	font-size: 2px;
}

.borderRed {
	width: 94%;
	height: 100%;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-left: 8px;
	border: 1px solid red;
	font-size: 15px;
	outline: none;
	box-sizing: border-box;
}

.borderGreen {
	width: 94%;
	height: 100%;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-left: 8px;
	border: 1px solid green;
	font-size: 15px;
	outline: none;
	box-sizing: border-box;
}
</style>
</head>
<body>
	<div class="container">
		<div class="login-wrapper">
			<div class="header">Login</div>
			<div class="form-wrapper">
				<form action="/admin_msg/adminLogin" method="post">
					<div class="item">
						<input id="admin_account" name="admin_account" class="input-item"
							required maxlength="20"> <label id="labelPhone"
							class="label-phone">account</label>
					</div>
					<div class="item">
						<input type="password" id="admin_account" name="admin_password"
							class="input-item" required maxlength="15"> <label
							id="labelPs" class="label-ps">password</label>
					</div>
					<input type="submit" value="Login" class="btn">
				</form>
			</div>
		</div>
	</div>

	<!-- 自定义提示框 -->
	<div class="alterDiv" style="display: none;">
		<p>&nbsp;</p>
		<p>
			<font size="4">提示：</font>
		</p>
		<p style="padding-left: 20px; width: 75%; word-break: break-all;">
			<font size="3" id="alterContent">${msg}</font>
		</p>
		<p>
			<button id="alterBut">确定</button>
		</p>
		<p>&nbsp;</p>
	</div>
</body>
</html>
